<template lang="pug">
  v-dialog(v-model="active" max-width="500px" persistent)
    v-card
      v-card-title {{ title }}
      v-card-text
        v-form(ref="form")
          v-text-field(ref="inputFieldA" label="名称" v-model="name" :rules="[rules.required]"  @keyup.enter="$refs.inputFieldB.focus()")
          v-text-field(ref="inputFieldB" type="number" label="单价" :rules="[rules.required]" v-model="amount"  @keyup.enter="$refs.inputFieldC.focus()")
          v-text-field(ref="inputFieldC" type="number" label="数量" v-model="quantity" :rules="[rules.required]"  @keyup.enter="confirm")
      v-card-actions
        v-spacer
        v-btn(text @click="cancel") 取消
        v-btn(text color="primary" @click="confirm") 确定
</template>

<script lang="ts">
  import Vue, {VueConstructor} from 'vue'
  import dlgminix from "@/components/mixins/DialogMixin"
  import FormValidateRulesMixin from "@/components/mixins/FormValidateRulesMixin"
  import {mapMutations} from 'vuex'
  import {OrderExtraFee, OrderItemType} from '@/store/modules/types/Order'
  import {AssetTypes} from '@/store/modules/types/Bundle'

  export default (Vue as VueConstructor<Vue & {
    addExtraFee: (payload: OrderExtraFee)=>void
  }>).extend({
    mixins: [dlgminix, FormValidateRulesMixin],
    name: 'order_form_extra_fee',
    methods: {
      ...mapMutations("order", ["addExtraFee"]),
      confirm() {
        if (this.$refs.form.validate()) {
          let fee: OrderExtraFee = {
            name:this.name,
            quantity: this.quantity,
            unit_price:this.amount,
            type: OrderItemType.ExtraFee
          }
          this.addExtraFee(fee)
        }
        this.active = false
      },
      reset(){
        this.name=""
        this.amount = 0
        this.quantity = 1
        this.$refs.form && this.$refs.form.resetValidation()
      },
      toggle(){
        this.active = !this.active
        this.reset()
      }
    },
    data() {
      return {
        title: "添加自定义费用",
        name: "",
        quantity: 1,
        amount: 0
      }
    }
  })
</script>